<template>
	<div class="content">
		<div style="display: flex;align-items: center;width: 750rpx;padding: 50rpx;margin: 60rpx auto 10rpx auto;">
			<image src="/static/images/logo.png" style="width: 60rpx;border-radius: 8rpx;" mode="widthFix"></image>
			<div style="padding: 10rpx;font-size: 56rpx;border-radius: 8rpx;font-weight: bold;color: darkslategray;">
				用户注册</div>
		</div>

		<div style="padding: 60rpx;background: white;border-radius: 32rpx;box-shadow: 0rpx -2rpx 5rpx #0055ff11;">
			<div style="display: flex;flex-direction: column;align-items: center;">
				<div class="avatarView" @click="uploadAvatar">
					<image v-if="avatar" :src=" $store.state.common.systemInfo.fileurl + avatar" mode="" class="avatarImage"></image>
					<u-icon v-else name="plus" size="40rpx" />
				</div>
				<div style="margin-top: 10rpx;">
					上传头像
				</div>
			</div>

			<div class="inputView">
				<u-field v-model="name" icon="account" :border-bottom="true" label-width="0" placeholder="请填写姓名/昵称">
				</u-field>
			</div>

			<div class="inputView">
				<u-field v-model="phone" icon="phone" :border-bottom="true" label-width="0" placeholder="请填写手机号">
				</u-field>
			</div>
			<div class="inputView">
				<u-field v-model="password" type="password" icon="lock" label-width="0" placeholder="请填写密码">
				</u-field>
			</div>
			<div class="inputView">
				<u-field v-model="passwordrepeat" type="password" icon="lock-fill" label-width="0"
					placeholder="请重复填写密码">
				</u-field>
			</div>

			<div style="margin-top: 20rpx;">
				<u-button hover-class="none" type="primary" @click="register" shape="circle"
					style="height: 90rpx;background: linear-gradient(to right,#6490f3,#2c72f3);width: 90%;color: white;">注
					册</u-button>
			</div>
			<div style="margin-top: 20rpx;display: flex;justify-content: space-between;padding: 20rpx 20rpx;">
				<div>已经有有账号? <span @click="goLogin" style="color: #2c72f3;"> 去登录</span> </div>
			</div>
		</div>
	</div>
</template>
<script>
	import util from '../../utils/index.js'
	export default {
		data() {
			return {
				password: '',
				passwordrepeat: '',
				avatar: '',
				phone: '',
				name: ''
			}
		},
		onLoad() {
			const _this = this
			const user = uni.getStorageSync("user")
			const token = uni.getStorageSync("token")
			const refreshToken = uni.getStorageSync("refreshToken")
			if(user && token && refreshToken){
				// uni.switchTab({
				// 	url:"/pages/index/index" 
				// })
			}
			// #ifdef APP
			uni.$on('uAvatarCropper', async (path) => {
				this.avatar = path;
				const ret = await util.uploadImage(path)
				_this.avatar = ret.data.pathname
			})
			// #endif
			
			// #ifdef H5
			uni.$on('uAvatarCropper', async (path) => {
				// this.avatar = path;
				const f = this.base64ToFile(path,"bgyx.jpg")
				const ret = await util.uploadImage(f)
				console.log( _this.$store.state.common.systemInfo)
				_this.avatar = ret.data.pathname
			})
			// #endif
		},
		onUnload() {
			uni.$off("uAvatarCropper")
		},
		methods: {
			base64ToFile:(base64Data, filename) => {
			  // 将base64的数据部分提取出来
			  const parts = base64Data.split(';base64,');
			  const contentType = parts[0].split(':')[1];
			  const raw = window.atob(parts[1]);
			  
			  // 将原始数据转换为Uint8Array
			  const rawLength = raw.length;
			  const uInt8Array = new Uint8Array(rawLength);
			  for (let i = 0; i < rawLength; ++i) {
			    uInt8Array[i] = raw.charCodeAt(i);
			  }
			  
			  // 使用Uint8Array创建Blob，然后使用Blob创建File对象
			  const blob = new Blob([uInt8Array], {type: contentType});
			  const file = new File([blob], filename, {type: contentType});
			  
			  return file;
			},
			register: async function() {
				if (!this.password || !this.avatar || !this.phone || !this.name) {
					uni.showToast({
						title: "请将信息填写全",
						icon: "none"
					})
					return
				}
				if (this.password != this.passwordrepeat) {
					uni.showToast({
						title: "两次密码输入不一致",
						icon: "none"
					})
					return
				}
				const data = {
					name: this.name,
					phone: this.phone,
					avatar: this.avatar,
					password: this.password,
					status:3
				}
				const ret = await this.$u.post(`login/login/register`, data)
				console.log(ret)
				if (ret.success) {
					uni.showToast({
						title: "注册成功",
						success() {
							setTimeout(()=>{
								uni.redirectTo({
									url: "/pages/login/login"
								})
							},500)
						}
					})
				} else {
					uni.showToast({
						title: ret.message,
						icon:"none"
					})
				}
			},
			goLogin: function() {
				uni.redirectTo({
					url: "/pages/login/login"
				})
			},
			uploadAvatar: function() {
				const _this = this
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						destWidth: 200,
						rectWidth: 200,
						fileType: 'jpg',
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.inputView {
		height: 100rpx;
		background: none;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		margin-top: 25rpx;
	}

	.avatarView {
		width: 120rpx;
		height: 120rpx;
		background: #f1f1f1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 60rpx;
	}

	.avatarImage {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}
</style>